<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #map{
            width: 800px;
            height: 600px;
            border: 2px solid black;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div id="map">
        
    </div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=eI6UXkzPz60TfIwWIlx1XV91TpeWe4hG"></script>

    <script>
        // 创建百度地图对象
        let map = new BMap.Map("map")
        
        // 创建百度地图显示的中心点
        let point = new BMap.Point(113.806923,34.703123)
        // 设置中心点和缩放比例
        map.centerAndZoom(point,20)
        // 开启滚轮缩放
        map.enableScrollWheelZoom(true)
        // 添加控件
        map.addControl(new BMap.NavigationControl());    
        map.addControl(new BMap.ScaleControl());    
        map.addControl(new BMap.OverviewMapControl());    
        map.addControl(new BMap.MapTypeControl());    
        
        var marker = new BMap.Marker(point);        
        map.addOverlay(marker); 
        // 添加点击监听事件
        map.addEventListener("click", function(e){
            console.log(e.point)
        })


        var polyline = new BMap.Polyline([
            new BMap.Point(113.80508,34.70191),
            new BMap.Point(113.80637,34.702),
            new BMap.Point(113.806566,34.704207)
            ],
            {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
        );
        map.addOverlay(polyline);

    </script>


</body>
</html>